<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>模具详情</title>
    <link rel="stylesheet" href="css/main.css" />
    <link rel="stylesheet" href="css/swiper-4.1.0.min.css" />
    <script src="js/jquery-1.10.1.min.js"></script>
    <script src="js/swiper-4.1.0.min.js"></script>
</head>
<body>
    <div class="wrapper">
        <div class="header">
            <div class="logo"></div>
            <div class="nav">
                <div class="wrapper">
                    <ul>
                        <li><a href="">首页</a></li>
                        <li><a href="">产品</a></li>
                        <li><a href="">展厅</a></li>
                        <li><a href="">定制</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="slider">
            <div class="swiper-container">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <img src="images/tmp1455426794_1062450_s.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="images/tmp1455426794_1062450_s.png" />
                    </div>
                    <div class="swiper-slide">
                        <img src="images/tmp1455426794_1062450_s.png" />
                    </div>
                </div>
                <!-- Add Pagination -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="container">
            <div class="location">
                <ol class="breadcrumb">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Library</a></li>
                    <li class="active">Data</li>
                </ol>
            </div>
            <div class="detail">
                <div class="top clear">
                    <div class="detail-preview">
                        <div class="view">
                            <div class="swiper-container">
                                <a class="arrow-left" href="#"></a>
                                <a class="arrow-right" href="#"></a>
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b1.jpg" alt=""></a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b2.jpg" alt=""></a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b3.jpg" alt=""></a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b4.jpg" alt=""></a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b5.jpg" alt=""></a>
                                    </div>
                                    <div class="swiper-slide">
                                        <a href="http://bbs.swiper.com.cn/forum.php?mod=viewthread&tid=1598&extra=" target="_blank"><img src="images/b6.jpg" alt=""></a>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="preview">
                            <a class="arrow-left" href="#"></a>
                            <a class="arrow-right" href="#"></a>
                            <div class="swiper-container">
                                <div class="swiper-wrapper">
                                    <div class="swiper-slide active-nav">
                                        <img src="images/s1.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/s2.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/s3.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/s4.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide">
                                        <img src="images/s5.jpg" alt="">
                                    </div>
                                    <div class="swiper-slide slide6">
                                        <img src="images/s6.jpg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="detail-con">
                        <h1>金天拓家具 欧式实木餐边柜餐边镜套装 法式厨房橡木储物柜621</h1>
                        <p class="price-wrap">价格：<strong class="price">￥3043.00</strong></p>
                        <p class="stock">供货数量：<span class="num">2323</span></p>
                        <div class="contact">
                            <dl>
                                <dt><img src="images/icon-tel.png" /></dt>
                                <dd>
                                    <span>咨询热线</span>
                                    <strong>400-400-400</strong>
                                </dd>
                            </dl>
                            <dl>
                                <dt><img src="images/icon-qq.png" /></dt>
                                <dd>
                                    <span>在线客服</span>
                                    <strong><a class="online-bar" href="">在线咨询</a></strong>
                                </dd>
                            </dl>
                        </div>
                    </div>
                </div>
                <div class="bottom">
                    <h5>产品介绍</h5>
                </div>
            </div>
        </div>
        <div class="footer">
            <div class="footer-links">
                <a href="">关于我们</a>
                <em>|</em>
                <a href="">经典案例</a>
                <em>|</em>
                <a href="">新闻动态</a>
                <em>|</em>
                <a href="">咨询团队</a>
                <em>|</em>
                <a href="">联系我们</a>
            </div>
            <div class="copyright">
                <p>Copyright © 2014-2018,www.xxxxx.com,All rights reserved</p>
            </div>
        </div>
    </div>
    <script>

        var swiper = new Swiper('.slider .swiper-container', {
            pagination: {
                el: '.swiper-pagination',
            }
        });
        //详情页图片轮播
        var viewSwiper = new Swiper('.view .swiper-container', {
            on:{
                slideChangeTransitionStart: function() {
                    updateNavPosition()
                }
            }
        })

        $('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == 0) {
                viewSwiper.slideTo(viewSwiper.slides.length - 1, 1000);
                return
            }
            viewSwiper.slidePrev()
        })
        $('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
            e.preventDefault()
            if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
                viewSwiper.slideTo(0, 1000);
                return
            }
            viewSwiper.slideNext()
        })

        var previewSwiper = new Swiper('.preview .swiper-container', {
            //visibilityFullFit: true,
            slidesPerView: 'auto',
            allowTouchMove: false,
            on:{
                tap: function() {
                    viewSwiper.slideTo(previewSwiper.clickedIndex)
                }
            }
        })

        function updateNavPosition() {
            $('.preview .active-nav').removeClass('active-nav')
            var activeNav = $('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() > previewSwiper.activeIndex) {
                    var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
                    previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    previewSwiper.slideTo(activeNav.index())
                }
            }
        }
    </script>
</body>
</html>